<template>
  <div class="box">
    <el-table :data="list" style="width: 100%" border>
      <el-table-column label="商品图片" width="230">
        <template #default="{ row }">
          <img :src="row.productImage" style="width: 300px" />
        </template>
      </el-table-column>
      <el-table-column prop="productName" label="商品标题" width="180" />
      <el-table-column prop="productStatus" label="状态">
        <template #default="{ row }">
          <span v-if="row.productStatus === 0">未生成</span>
          <span v-else-if="row.productStatus === 1">处理中</span>
          <span v-else-if="row.productStatus === 2">已生成</span>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" width="250">
        <template #default="{ row }">
          <el-button v-if="row.code != 2" type="info" @click="changeState(row)"
            >一键生成</el-button
          >
          <el-button v-if="row.code != 2" type="error" @click="del(row)"
            >删除生成</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      list: [],
    };
  },

  methods: {
    // 获取列表
    async getList() {
      const { data } = await axios.get("http://localhost:3000/products");
      console.log(data);
      this.list = data;
    },
    // 一键生成
    changeState(rows) {
      axios
        .patch(`http://localhost:3000/products/${rows.id}`, {
          productStatus: 1,
        })
        .then((res) => {
          if ((res.status = 200)) {
            const { productStatus } = res.data;
            rows.productStatus = productStatus;
          }
        });
    },
    // 删除生成
    async del(rows) {
      axios
        .patch(`http://localhost:3000/products/${rows.id}`, {
          productStatus: 0,
        })
        .then((res) => {
          if ((res.status = 200)) {
            const { productStatus } = res.data;
            rows.productStatus = productStatus;
          }
        });
    },
  },
  mounted() {
    // 获取列表
    this.getList();
  },
};
</script>

<style scoped>
.box {
  width: 800px;
  height: 600px;
  margin: auto;
}
</style>
